<template>
  <div class="racedetail-breadcrumb">
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/race-news' }">动态列表</el-breadcrumb-item>
      <el-breadcrumb-item>当前页面</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="news-detail" >
    <div class="container">
      <div class="top">
        <h1 class="title">{{ title }}</h1>
        <div class="title-detail">
          <!-- <div>{{ academy }}</div> -->
          <div>发布时间：{{ publishTime }}</div>
          <div>发布者：{{ author }}</div>
          <div>类型：{{ type }}</div>
        </div>
      </div>

      <div class="content">
        <!-- <img v-lazy="cover" v-show="cover" class="cover"> -->
        <div class="rich-text" v-html="richText"></div>
      </div>

    </div>

  </div>
</template>

<script setup>
import { computed, onBeforeMount,onMounted, ref} from "vue";


const status = ref(0)
const richText = ref('');
const title = ref("");
const academy = ref("");
const publishTime = ref("");
const author = ref("");
const type = computed(() => {
  switch (typeId.value) {
    case 0:
      return "理工";
    case 1:
      return "外语";
    case 2:
      return "文体";
    case 3:
      return "商科";
    case 4:
      return "综合";
    default:
      return "未知";
  }
})
const typeId = ref();
const cover = ref("");



const getContestInfo = async () => {
  const data = JSON.parse(localStorage.getItem('newsData'))
  title.value = data.title
  academy.value = data.academy
  publishTime.value = data.createTime
  author.value = data.nickName
  typeId.value = data.contestType
  cover.value = data.contestProfileSmallPath
  richText.value = data.content
  status.value = data.status
}

onBeforeMount(() => {
  getContestInfo()
})
// 挂载后滚动到顶部
onMounted(() => {
  window.scrollTo(0, 0)
})



</script>



<style scoped lang="scss">
.racedetail-breadcrumb {
        margin: 2% 0 0 14%;
    }
.cover {
  width: 100%;
  height: 300px;
  color: #78e26c;
}

.news-detail {
  width: 100%;
  position: relative;
  // display: flex;
  padding: 20px 13%;

  .container {
    max-width: 1024px;
    flex: 1;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 1px 2px 6px #bbb;
    padding: 10px 20px;

    .top {
      text-align: center;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .title {
        margin-bottom: 20px;
      }

      .title-detail {
        display: flex;
        justify-content: space-between;
        padding: 0 30px;
        width: 90%;
        font-weight: 100;
        font-size: 15px;
        // min-width: 600px;
      }
    }

    .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      padding: 0 20px;

      .rich-text {
        // box-sizing: border-box;
        width: 100%;
        display: flex;
        flex-direction: column;
        min-height: 450px;

        :deep(*) {
          width: inherit;
        }

      }

      .btn-box {
        display: flex;
        padding: 30px;

        .detail-btn {
          font-size: 18px;
          width: 150px;
          height: 50px;
        }
      }
    }
  }

}
</style>